<template>
    <el-pagination ref="myPN" v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="pageOptions"
        :prev-text="t('上一页')" :next-text="t('下一页')" layout="total, sizes, prev, pager, next, jumper" :total="totalRow"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup lang="ts">
import { Sysinfo } from '@/common/config';
import { onMounted, reactive, ref, watch } from 'vue';
import { t } from '@/common/locale'
import elHelper from '@/common/elHelper';

const emit = defineEmits(['onSizeChanged', 'onPageChanged', 'update:total'])
const props = defineProps({
    total: {
        type: Number,
        default: 0
    }
})

const page = ref(1)
const pageSize = ref(Sysinfo.PageSize)
const pageOptions = reactive(Sysinfo.PageSizeOptions)
const myPN = ref()
const totalRow = ref(props.total)

watch(() => props.total, (val) => {
    if (val) {
        totalRow.value = val
        elHelper.setPageNavigationStyle(myPN.value.$el, totalRow)
    }
})

const handleSizeChange = (val: number) => {
    pageSize.value = val
    emit('onSizeChanged', val)
}
const handleCurrentChange = (val: number) => {
    page.value = val
    emit('onPageChanged', val, totalRow.value)
}
onMounted(() => {
    elHelper.setPageNavigationStyle(myPN.value.$el, totalRow)
})
</script>
<style lang="scss" scoped></style>